<template>
	<view class="rechargeRecordDeta">
		<view class="recharChoose">
			<text>近一年</text>
			<uni-datetime-picker v-model="Data.range" type="daterange" @maskClick="maskClick">
				<text class="range">
					选择时间
					<text class="iconfont icon-xiangxia1"></text>
				</text>
			</uni-datetime-picker>
		</view>
		<view class="recharList">
			<view v-if="Data.list?Data.list.length:0">
				<view class="recharItem" v-for="v in Data.list" :key="v.orderTime" @click="toBillDetail(v)">
					<view>
						<text>就诊卡充值</text>
						<text>+{{v.recharge}}</text>
					</view>
					<view>
						<text>{{v.orderTime}}</text>
						<text>余额{{v.balance}}.00</text>
					</view>
				</view>
			</view>
			<view class="recharItem" v-else>
				<view>
					<text>暂无充值记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		watch,
		onMounted
	} from 'vue'
	import {
		onlinepayPeydetail,
		hospitalizationMsgRecharge
	} from '@/api/TopUpService.js';
	import {
		useTopStore
	} from '@/store/TopUpService.js';
	const topStore = useTopStore();
	const props = defineProps(['id', 'type']);
	const Data = reactive({
		range: [],
		list: [],
	})
	const toBillDetail = (v) => {
		topStore.set((val) => {
			val['billDetail'] = v;
		})
		uni.navigateTo({
			url: '/pages/selfPayment/billDetail/billDetail'
		})
	}
	const onlinepay = (id, startTime, endTime) => {
		let dataId = {
			id,
			startTime,
			endTime
		}
		let onlinepayPey = onlinepayPeydetail(dataId);
		if (props.type == 'hospitalization') {
			onlinepayPey = hospitalizationMsgRecharge(dataId);
		}
		onlinepayPey.then(({
			data
		}) => {
			// console.log(data)
			if (data.msg == 'success') {
				Data.list = data.data;
			}
		}).catch((err) => {
			console.log(err)
		})
	}
	// watch(
	// 	() => Data.range,
	// 	() => {
	// 		onlinepay(props.id,Data.range[0],Data.range[1])
	// 	}
	// )
	watch([() => props.id, () => Data.range], () => {
		onlinepay(props.id, Data.range[0] || toDate(new Date().setFullYear(new Date().getFullYear() - 1)), Data
			.range[1] || toDate(new Date()))
	})
	// const maskClick = ev => {
	// 	console.log('maskClick事件:', ev)
	// }
	const toDate = t => new Date(t).toLocaleString('zh-CN', {
		dateStyle: 'short'
	}).split('/').join('-')
	onMounted(() => {
		// onlinepay(props.id, toDate(new Date().setFullYear(new Date().getFullYear() - 1)), toDate(new Date()));
	})
</script>

<style lang="less" scoped>
	.rechargeRecordDeta {
		width: 680rpx;
		margin: 0 auto;

		.recharChoose {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 40rpx;

			&>text {
				font-size: 28rpx;
				background-color: #006eff;
				margin-right: 36rpx;
				border-radius: 50rpx;
				padding: 12rpx 28rpx;
				color: #fff;
				font-weight: 500;
			}

			.range {
				margin-right: 36rpx;
				border-radius: 50rpx;
				padding: 12rpx 28rpx;
				color: #fff;
				font-weight: 500;
				font-size: 26rpx;
				background-color: #e4f0ff;
				color: #006eff;

				.iconfont {
					font-size: 20rpx;
					margin: 0 0 0 10rpx;
				}
			}
		}

		.recharList {
			width: 100%;

			.recharItem {
				width: 100%;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				border-top: 1px solid #f2f2f2;
				border-bottom: 1px solid #f2f2f2;

				view {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 35rpx;
					font-weight: 600;
					margin: 15rpx 0;

					&:first-child>text:nth-child(2) {
						color: #f5981e;
					}

					&:nth-child(2) {
						color: #adadad;
						font-size: 25rpx;
					}
				}
			}
		}
	}
</style>
